<template>
    <div ref="chartRef" class="chart"></div>
</template>

<script setup lang="ts">
import { shallowRef, onMounted, type PropType, watch, onUnmounted } from 'vue';
import type { ECharts, EChartsCoreOption } from 'echarts'
import * as echarts from 'echarts'
const props = defineProps({
    option: {
        type: Object as PropType<EChartsCoreOption>,
        required: true,
        default: () => ({})
    },
    loading: Boolean
})

//  1.根据DOM初始化Echarts实例
const chartRef = shallowRef<HTMLElement | null>(null)
const chart = shallowRef<ECharts | null>(null)

function init() {
    if (props.option) {
        chart.value = echarts.init(chartRef.value)
        setOption(props.option)
    }
}

function setOption(option: any, notMerge?: boolean, lazyUpdate?: boolean) {
    if (chart.value) {
        chart.value.setOption(props.option)

    }
}

onMounted(() => {
    init()
})

function resize() {
    chart.value?.resize()
}

watch(() => props.option, () => {
    setOption(props.option)
})

defineExpose({
    chart,
    setOption,
    resize
})

onUnmounted(() => {
    if (chart.value) chart.value.dispose();
})
</script>

<style scoped lang="scss">
.chart {
    width: 100%;
    height: 90%
}
</style>